<template>
	<view class="cg-btn-placeholder" :style="[style]">
		<u-button type="primary" :text="text" @click="onClick" :color="themeColor"></u-button>
	</view>
</template>

<script>
	export default {
		name: "cg-fixed-btn",
		props: {
			text: {
				default: '提交',
				type: String
			},
			size: {
				default: 'mini',
				type: String
			},
			type: {
				default: 'primary',
				type: String
			},
			position: {
				default: '',
				type: String
			},
			customStyle: {
				default: () => {
					return {}
				},
				type: Object
			}
		},
		computed: {
			classObject() {
				const arr = ['danger'];
				if (this.type !== 'danger') {
					arr.splice(arr.indexOf('danger'), 1)
				}
				return arr
			},
			style() {
				console.log('this.cu', this.customStyle);
				return {
					position: this.position,
					...this.customStyle
				}
			}
		},
		data() {
			return {

			};
		},
		methods: {
			onClick() {
				console.log(this.classObject)
				this.$emit('click')
			}
		}
	}
</script>

<style lang="scss" scoped>
	.cg-btn-placeholder {
		z-index: 100;
		margin: 0 auto;
		width: 92%;
		left: 30rpx;
		bottom: calc(30rpx + #{$safeHeight});
	}

	.btn {
		box-sizing: border-box;
		@include fixedBtn;

	}

	.danger {
		background-color: $red;
	}
</style>